<template>
	<view>
		<uni-popup ref="redMain" type="center" :custom="true" :mask-click="true">
			<view class="rbag_model" @touchmove.prevent.stop>
			<view class="rbag_con hidden">
				<view class="rbag_top">
					<view class="rbag_top_info">
						<image class="rbag_logo" :src="$util.img(shop.logo)" mode=""></image>
						<view class="app_name">{{shop.site_name}}</view>
						<view class="rbag_tips">送您一个红包</view>
					</view>
				</view>
				<view class="open_rbag_btn" :animation="openbrnanimation" @click="openbtn()">領</view>
			</view>
			<view class="rbag_con">
				<view class="hide_btn" @click.stop="hidebtn">
					<icon type="cancel" color="#fbd977" size="28" />
				</view>
			</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
import uniPopup from '../uni-popup/uni-popup.vue';
	export default {
		name:'index-red',
		components: {
			uniPopup
		},
		data() {
			return {
				shop:[],
				red:[]
			};
		},
		mounted(){//在实例创建完成后被立即调用
			// this.getData()
		},
		methods:{
			open(){
				console.log(this.$refs)
				this.$refs.redMain.open()
			},
			hidebtn(){
				this.$refs.redMain.close()
			},
			openbtn(){
				
				var that = this;
				uni.requestSubscribeMessage({
					tmplIds:['uNPZURTbEa-i7VJHqPWBd_SAbdgeZEM55RAkL8cTCqA'],
					success(r){
						console.log(r)
						
					},
					complete(){
						that.$api.sendRequest({
							url:'/api/member/receviepushRed',
							data:{
								id:that.red.id
							},
							success(res){
								if(res.code==0){
									uni.showModal({
										title:"提示",
										content:res.msg,
										showCancel:false,
										complete() {
											that.hidebtn();
											uni.navigateTo({
												url:"/pages/goods/detail/detail?sku_id="+that.red.goods_id
											})
										}
									})
								}else{
									uni.showToast({
										title:res.msg,
										icon:"none"
									})
									that.hidebtn();
								}
							}
						})
					}
				})
				
			},
			getData(){
				var that = this;
				this.$api.sendRequest({
					url:'/api/member/pushRed',
					success(res){
						if(res.code==0){
							that.shop = res.shop
							that.red = res.red
							that.open();
						}
					}
				})
			}
		}
	}
</script>

<style>
	.rbag_model {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,0.3);
		z-index: 1000;
		
		
	}
	.hidden {
		overflow: hidden;
	}
	.rbag_con {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 80%;
		height: 840upx;
		background-color: #da4d44;
		margin: auto;
		border-radius: 14upx;
		box-shadow: 0upx 0upx 10upx rgba(0,0,0,0.2);
		
		
	}
	.open_rbag_btn {
		position: absolute;
		top: 450upx;
		left: 0;
		right: 0;
		width: 180upx;
		height: 180upx;
		line-height: 180upx;
		border-radius: 50%;
		margin: 0 auto;
		text-align: center;
		background-color: #ffd287;
		font-size: 55upx;
		color: #fef5e8;
		box-shadow: 2upx 2upx 6upx rgba(0,0,0,0.2);
		z-index: 1002;
	}
	.hide_btn {
		position: absolute;
		bottom: -110upx;
		left: 0;
		right: 0;
		width: 80upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		margin: 0 auto;
	}
	.rbag_top {
		position: absolute;
		left: -20%;
		top: 0;
		width: 140%;
		height: 540upx;
		background-color: #e0534a;
		border-radius: 0 0 50% 50%;
		box-shadow: 0 0 14upx rgba(0,0,0,0.4);
		z-index: 1001;
		
	}
	.rbag_top_info {
		margin-top: 60upx;
		
	}
	.rbag_logo {
		width: 160upx;
		height: 160upx;
		border-radius: 50%;
		display: block;
		margin: 0 auto;
		overflow: hidden;
	}
	.app_name {
		font-size: 50upx;
		color: #edddd3;
		text-align: center;
		margin-top: 34upx;
		letter-spacing: 1upx;
	}
	.rbag_tips {
		font-size: 36upx;
		color: #edddd3;
		text-align: center;
		letter-spacing: 1upx;
	}
</style>